<template>
  <div>
      <el-row>
        <el-button v-if="hasPermission('cms:statistic:hit:list')" type="primary" size="small" icon="el-icon-refresh" @click="refreshList()">刷新</el-button>
        <el-select v-model="searchForm.site.id" placeholder="请选择站点" size="small" style="margin-left: 15px;">
          <el-option
            v-for="item in siteList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-row>
    <el-treetable
      border
      :data="dataList"
      isBigData
      max-height="1200"
      isTreeTable
      size="medium"
      v-loading = "loading"
      row-key="id"
      class="table">
    <el-treetable-column
        prop="name"
        show-overflow-tooltip
        label="名称"
        width="300">
      </el-treetable-column>
    <el-treetable-column
        prop="image"
        show-overflow-tooltip
        label="图标"
        width="50">
      <template slot-scope="scope">
        <div style="text-align: center"><i :class="scope.row.image"></i></div>
      </template>
      </el-treetable-column>
    <el-treetable-column
        prop="enableFlag"
        show-overflow-tooltip
        align="center"
        label="启用标记"
        width="100">
      <template slot-scope="scope">
        <span v-bind:class="{'text-success':scope.row.enableFlag==='1','text-danger':scope.row.enableFlag!=='1'}">
          <i class="fa fa-circle"></i>
        </span>
      </template>
      </el-treetable-column>
    <el-treetable-column
        prop="hits"
        align="center"
        label="栏目点击量">
      <template slot-scope="scope">
        <span v-bind:class="[{'text-attention':scope.row.children&&scope.row.children.length>0}]">
          {{scope.row.hits}}
        </span>
      </template>
      </el-treetable-column>
    <el-treetable-column
        prop="infoCount"
        align="center"
        label="信息量">
      <template slot-scope="scope">
        <span v-bind:class="[{'text-attention':scope.row.children&&scope.row.children.length>0}]">
          {{scope.row.infoCount}}
        </span>
      </template>
      </el-treetable-column>
      <el-treetable-column
        prop="detailsHits"
        align="center"
        label="详情点击量">
        <template slot-scope="scope">
        <span v-bind:class="[{'text-attention':scope.row.children&&scope.row.children.length>0}]">
          {{scope.row.detailsHits}}
        </span>
        </template>
      </el-treetable-column>
    </el-treetable>

  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: [],
      loading: false,
      siteList: [],
      searchForm: {
        site: {
          id: ''
        }
      }
    }
  },
  components: {
  },
  created () {
    this.getSiteList()
  },
  activated () {

  },

  methods: {
      // 获取数据列表
    refreshList () {
      this.loading = true
      let selectedSite = this.siteList.filter(ele => ele.id === this.searchForm.site.id)
      let params = selectedSite != null && selectedSite.length > 0 ? {siteId: selectedSite[0].id} : {}
      this.$http({
        url: '/cms/statistic/columnhit',
        method: 'get',
        params: params
      }).then(({data}) => {
        this.dataList = data.treeData
        this.loading = false
      })
    },
    // 获取站点列表
    getSiteList () {
      this.$http({
        url: '/cms/site/cmsSite/allList',
        params: {},
        method: 'get'
      }).then(({data}) => {
        this.siteList = data.data
        if (this.siteList && this.siteList.length > 0) {
          this.searchForm.site.id = this.siteList[0].id
        }
        this.refreshList()
      })
    }
  }
}
</script>
